<template>
  <div class="packageCard">
    <div class="listDataDetial" style="background-color:#fafafa">
      <el-row>
        <el-col :span="6">
          <div class="photo" align="center">
            <img src="../../../static/img/pic2.jpg">
          </div>
        </el-col>
        <el-col :span="16" :offset="1">
          <p class="title">{{packageBaseInfo.package_name}}</p>
          <p class="title_a">套餐热度：{{packageBaseInfo.package_heat}}</p>
          <div class="div_top" v-for="(item,index) in serviceList" :key="index">
            <span>{{item.service_type_title}}</span>
            <span>{{item.memo}}</span>
          </div>
        </el-col>
        <el-row>
          <el-col :span="17" :offset="7">
            <span class="span_adjust">套餐总价:</span>
            <span class="span_color">￥{{packageBaseInfo.money + '.00'}}元</span>
          </el-col>
          <el-col :span="17" :offset="7">
            <el-button type="primary" @click="toPay()" style="float:right;margin-right:20px;">立即购买</el-button>
          </el-col>
        </el-row>
      </el-row>
    </div>
  </div>
</template>
<script type="text/javascript">
  import { postDataToServer } from '../../assets/js/post.js'

  export default {
    name: 'packageCard',
    props: ['packageData'],
    data () {
      return {
        packageBaseInfo: {
          package_name: '',
          money: '',
          package_heat: '',
        },
        returnData: {
          packageId: '',
        },
        serviceList: [],
      }
    },
    created () {
      this.getPackageInfo()
      this.getSelectService()
    },
    methods: {
      toPay () {
        this.returnData.packageId = this.packageData
        this.$emit('returnBuy', this.returnData)
      },
      getPackageInfo () {
        let _this = this
        let pramas = new Object()
        pramas.id = this.packageData
        postDataToServer('PACKAGE_GET', pramas).then((data) => {
          if (data.status === 0) {
            this.packageBaseInfo = data.data_list
          }
        })
      },
      getSelectService () {
        let _this = this
        let pramas = new Object()
        pramas.id = this.packageData
        postDataToServer('PACKAGE_DETAIL_GETBY_PACKAGEID', pramas).then((data) => {
          if (data.status === 0) {
            this.serviceList = data.data_list
          }
        })
      },
    }
  }
</script>
<style scoped>
  .photo img {
    padding: 0.5em;
    text-align: center;
    width: 100%;
  }

  .listData {
    width: 50%;
    margin-top: 1.6em;
    display: inline-block;
  }

  .listDataDetial {
    margin: auto;
    width: 90%;
  }

  .title {
    font-size: 1.5em;
    color: #475669;
  }

  .title_a {
    font-size: 1.1em;
  }

  .listDataDetial button {
    margin-bottom: 0.5em;
  }

  h2 {
    text-shadow: none;
    font-weight: 300;
    color: #fffff;
    font-family: 微软雅黑;
  }

  .div_top span {
    font-family: 微软雅黑;
    margin-left: 1.2em;
  }

  .div_top {
    font-size: 0.9em;
    /*margin-top: 5px;*/
  }

  button {
    /*float: right;*/
    margin-right: 0.5em;
  }

  .span_adjust {
    line-height: 28px;
  }

  .span_color {
    color: #FF4949;
    font-size: 25px;
    font-family: 微软雅黑;
  }
</style>
